<template>
  <div id="cluereport">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>干部监督</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cluereport' }">线索举报</el-breadcrumb-item>
      <el-breadcrumb-item>分析图表</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxd" :style="'height:'+tableHeight+'px'">
          <el-scrollbar style="height: calc(100% + 16px);">
      <!--工具条-->
      <h1>线索举报 分析图表</h1>
      <!--列表-->
      <el-tabs type="card" v-model="activeName" style="margin:20px;" @tab-click="tabchange">
        <el-tab-pane name="all" label="总体分析">
            <el-row>
              <el-col :span="12">
                <Chart class="indexchart" id="mytest" height="500px" width="600px" :option="myoption11" />
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  style="float:right"
                  v-model="theyear"
                  @change="getChart12"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy">
                </el-date-picker>
                <Chart class="indexchart" id="mytest2" height="500px" width="600px" :option="myoption12" />
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane name="source" label="举报来源分析">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                  @change="getChart21()"
                  style="float:right;margin-right:30px"
                  v-model="daterange1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
                <Chart class="indexchart" id="mytest3" height="500px" width="600px" :option="myoption21" />
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  style="float:right"
                  v-model="theyear2"
                  @change="getChart22"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy">
                </el-date-picker>
                <Chart class="indexchart" id="mytest4" height="500px" width="600px" :option="myoption22" />
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane name="case_class" label="反映问题分类分析">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                  @change="getChart21()"
                  style="float:right;margin-right:30px"
                  v-model="daterange1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
                <Chart class="indexchart" id="mytest5" height="500px" width="600px" :option="myoption21" />
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  style="float:right"
                  v-model="theyear2"
                  @change="getChart22()"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy">
                </el-date-picker>
                <Chart class="indexchart" id="mytest6" height="500px" width="600px" :option="myoption22" />
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane name="nature" label="性质分析">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                  @change="getChart21()"
                  style="float:right;margin-right:30px"
                  v-model="daterange1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
                <Chart class="indexchart" id="mytest7" height="500px" width="600px" :option="myoption21" />
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  style="float:right"
                  v-model="theyear2"
                  @change="getChart22()"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy">
                </el-date-picker>
                <Chart class="indexchart" id="mytest8" height="500px" width="600px" :option="myoption22" />
              </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane name="status" label="办理状态分析">
            <el-row>
              <el-col :span="12">
                <el-date-picker
                  @change="getChart21()"
                  style="float:right;margin-right:30px"
                  v-model="daterange1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
                <Chart class="indexchart" id="mytest9" height="500px" width="600px" :option="myoption21" />
              </el-col>
              <el-col :span="12">
                <el-date-picker
                  style="float:right"
                  v-model="theyear2"
                  @change="getChart22()"
                  type="year"
                  placeholder="选择年"
                  value-format="yyyy">
                </el-date-picker>
                <Chart class="indexchart" id="mytest10" height="500px" width="600px" :option="myoption22" />
              </el-col>
            </el-row></el-tab-pane>
      </el-tabs>
          </el-scrollbar>
    </section>
  </div>
</template>

<script>
import Chart from '@/components/Chart.vue'
export default {
  components: {
    Chart
  },
  data () {
    return {
      daterange1: [],
      myoption11: {},
      myoption12: {},
      myoption21: {},
      myoption22: {},
      theyear: '',
      theyear2: '',
      activeName: 'all',
      tableHeight: 100,
      title: '',
      legend: [],
      sourceDic: [],
      caseClassDic: [],
      natureDic: [],
      statusDic: []
    }
  },
  methods: {
    tabchange () {
      if (this.activeName === 'all') {
        this.getChart11()
        this.getChart12()
      } else {
        this.getChart21()
        this.getChart22()
      }
      switch (this.activeName) {
        case 'source':
          this.legend = this.sourceDic
          this.title = '举报来源'
          break
        case 'case_class':
          this.legend = this.caseClassDic
          this.title = '反映问题分类'
          break
        case 'nature':
          this.legend = this.natureDic
          this.title = '性质'
          break
        case 'status':
          this.legend = this.statusDic
          this.title = '办理状态'
          break
      }
    },
    getChart11 () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/busClueReport/statByAllYears`)
        .then(response => {
          if (response.data.success) {
            this.myoption11 = {
              title: {
                text: '线索举报情况总体分析 - 历年折线图'
              },
              xAxis: {
                type: 'category',
                data: response.data.result.years
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: response.data.result.data,
                type: 'line'
              }]
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getChart12 () {
      let url = ''
      if (this.theyear) {
        url = this.$http.defaults.selectionAPI + `api/busClueReport/statMonthDataByYear?year=${this.theyear}`
      } else {
        this.$message({
          message: '年度不能为空',
          type: 'error'
        })
        return
      }
      this.$http
        .get(url)
        .then(response => {
          if (response.data.success) {
            this.myoption12 = {
              title: {
                text: '线索举报情况总体分析 - 年度数量柱状图'
              },
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: response.data.result,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
                }
              }]
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getChart21 () {
      let url = this.$http.defaults.selectionAPI + `api/busClueReport/statFieldPieData?field=${this.activeName}`
      if (this.daterange1 && this.daterange1.length > 0) {
        url = this.$http.defaults.selectionAPI + `api/busClueReport/statFieldPieData?field=${this.activeName}&beginDate=${this.daterange1[0]}&endDate=${this.daterange1[1]}`
      }
      this.$http
        .get(url)
        .then(response => {
          if (response.data.success) {
            let data = []
            if (response.data.result.fields && response.data.result.fields.length > 0) {
              for (let i = 0; i < response.data.result.fields.length; i++) {
                data.push({name: response.data.result.fields[i], value: response.data.result.data[i]})
              }
            }
            this.myoption21 = {
              'calculable': true,
              'legend': {
                'data': this.length,
                'orient': 'vertical',
                'x': 'right',
                'y': 'center'
              },
              'series': [
                {
                  'data': data,
                  'center': ['50%', '60%'],
                  'name': this.title,
                  'type': 'pie',
                  'radius': '55%'
                }
              ],
              'title': {
                text: this.title + '分析 - 构成饼图'
              },
              // 'toolbox': {
              //   'feature': {'saveAsImage': {'show': true},
              //     'restore': {'show': true},
              //     'dataView': {'show': true, 'readOnly': false},
              //     'mark': {'show': true}},
              //   'show': true
              // },
              'tooltip': {'formatter': '{a} <br/>{b} : {c} ({d}%)', 'trigger': 'item'},
              'xAxis': null,
              'yAxis': null
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getChart22 () {
      this.myoption22 = {
        'title': {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        'legend': {
          'data': this.legend,
          'orient': 'vertical',
          'x': 'right',
          'y': 'center'
        },
        grid: {
          left: '3%',
          right: '20%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        series: [
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          },
          {
            name: '',
            type: 'bar',
            stack: '总量',
            data: []
          }
        ]
      }
      let url = ''
      if (this.theyear2) {
        url = this.$http.defaults.selectionAPI + `api/busClueReport/statFieldBarData?field=${this.activeName}&year=${this.theyear2}`
      } else {
        this.$message({
          message: '年度不能为空',
          type: 'error'
        })
        return
      }
      this.$http
        .get(url)
        .then(response => {
          if (response.data.success) {
            this.myoption22 = {}
            let series = []
            if (response.data.result && response.data.result.length > 0) {
              series = []
              for (let item of response.data.result) {
                series.push({
                  name: item.name,
                  type: 'bar',
                  stack: '总量',
                  label: {
                    show: true,
                    position: 'insideRight'
                  },
                  data: item.data
                })
              }
            }
            // if (series && series.length === 0) {
            //   series = [
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     },
            //     {
            //       name: '',
            //       type: 'bar',
            //       stack: '总量',
            //       data: []
            //     }
            //   ]
            // }
            this.myoption22 = {
              'title': {
                text: this.title + '分析 - 年度柱状图'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              'legend': {
                'data': this.legend,
                'orient': 'vertical',
                'x': 'right',
                'y': 'center'
              },
              grid: {
                left: '3%',
                right: '20%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value'
              },
              yAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
              },
              series: series
            }
            console.log(JSON.stringify(this.myoption22))
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getDics (code) {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/sysDict/getByCode?code=` + code)
        .then(response => {
          if (response.data.success) {
            switch (code) {
              case '01':
                this.sourceDic = response.data.result.map(a => a.label)
                break
              case '02':
                this.caseClassDic = response.data.result.map(a => a.label)
                break
              case '04':
                this.natureDic = response.data.result.map(a => a.label)
                break
              case '07':
                this.statusDic = response.data.result.map(a => a.label)
                break
            }
            console.log(JSON.stringify(this.wtlyDic))
            console.log(JSON.stringify(this.cljdjgDic))
            console.log(JSON.stringify(this.yxqDic))
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getAllDics () {
      this.getDics('01')
      this.getDics('02')
      this.getDics('03')
      this.getDics('04')
      this.getDics('05')
      this.getDics('06')
      this.getDics('07')
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 148
      })
    }
  },
  mounted () {
    this.getAllDics()
    var date = new Date()
    this.theyear = date.getFullYear().toString()
    this.theyear2 = date.getFullYear().toString()
    this.getChart11()
    this.getChart12()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style>
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
</style>
<style scoped>
  #cluereport .el-button{
    color:#fff !important;
  }
  #cluereport h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #cluereport .wboxs{
    width: 100%;
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
    padding:0;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
